iT邦幫忙

2024 iThome 鐵人賽
DAY 1
3
Security

資安這條路：系統化學習網站安全與網站滲透測試系列 第 1 篇

資安這條路：Day 1 建立環境與認識網站架構

16th鐵人賽
523 瀏覽

  • 分享至 

  • xImage
    •  

前言

為什麼從建立一個測試網站開始，在網站安全教學的過程中，如果直接從工具上手，多半會變成腳本小子，你會知道工具怎麼用，但不知道底層原理是什麼，因此這個系列會透過撰寫「有問題的網站」來講解漏洞的原理與成因，期待讓網站工程師更了解事情經過。

image

如何建立一個測試網站

本次我們將透過 Node.js 來建立一個不安全的網站與功能，以便學習和測試網站安全。這個過程將幫助我們理解網站架構，並為後續的安全測試奠定基礎。

環境準備

在開始之前，請確保系統已經安裝以下工具：

  • Linux 作業系統
  • Docker
  • Docker Compose

目標

  1. 建立實驗環境（lab）
  2. 了解網站架構與組成
  3. 了解 Node.js 架構

為什麼需要了解這些？

  • 學習網站安全：透過建立和分析易受攻擊的網站，我們可以更好地理解潛在的資安漏洞。
  • 自我提升：建立有弱點的網站可以幫助我們更深入地理解安全問題，並提高解決這些問題的能力。
  • 實作技能：這個過程還能幫助我們練習使用開發者工具，這是網站開發和安全測試中的重要技能。

建立實驗環境

Day 1 實驗環境

https://github.com/fei3363/ithelp_web_security_2024/commit/c953c613f907b932eda267169605fb7f705b322b

讓我們逐步建立必要的檔案和設定：

1. docker-compose.yml

這個檔案定義了我們的應用服務和資料庫服務：

version: '3'
services:
  app:
    build: 
      context: ./web
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - MONGODB_URI=mongodb://mongo:27017/myapp
      - NODE_ENV=development
    depends_on:
      - mongo
    volumes:
      - ./web:/usr/src/app
      - /usr/src/app/node_modules
  mongo:
    image: mongo:latest
    ports:
      - "27017:27017"
    volumes:
      - mongodb_data:/data/db
volumes:
  mongodb_data:

2. web/Dockerfile

這個 Dockerfile 用於建構我們的 Node.js 應用程式容器：

FROM node:14
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "npm", "run", "dev" ]

3. web/package.json

定義了我們的 Node.js 應用程式相依套件和腳本：

{
  "name": "nodejs-docker-app",
  "version": "1.0.0",
  "description": "A simple Node.js app with Docker",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.7"
  }
}

4. web/public/index.html

這是我們的前端頁面：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>測試網頁</title>
    <style>
        body { font-family: "微軟正黑體", Arial, sans-serif; text-align: center; padding-top: 50px; }
        #message { margin-top: 20px; font-weight: bold; }
    </style>
</head>
<body>
    <h1>歡迎來到測試網頁</h1>
    <p>這是一個由 Express.js 建立的簡單測試頁面</p>
    <button onclick="fetchMessage()">從 API 取得資訊</button>
    <div id="message"></div>
    <script>
        function fetchMessage() {
            fetch('/api/hello')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('message').innerText = data.message;
                })
                .catch(error => console.error('錯誤:', error));
        }
    </script>
</body>
</html>

5. web/server.js

這是我們的後端伺服器程式碼：

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.get('/api/hello', (req, res) => {
  res.json({ message: 'Hello from the server!' });
});

app.listen(port, () => {
  console.log(`伺服器執行在 http://localhost:${port}`);
});

理解網站架構

透過這個設定，我們可以了解到基本的網站架構：

  1. 前端（index.html）：提供使用者介面和基本的互動功能。
  2. 後端（server.js）：處理 API 請求，提供資料和業務邏輯。
  3. 資料庫（MongoDB）：儲存和管理資料（今日並未直接使用）。

Node.js 架構

Node.js 允許我們使用 JavaScript 來編寫伺服器端程式碼。在我們的例子中：

  1. 使用 Express.js 框架來簡化 HTTP 伺服器的建立和路由管理。
  2. 靜態檔案（如 index.html）透過 sendFile 方法直接發送到使用者端。
  3. API 端點（如 /api/hello）透過 app.get() 方法定義，並回傳 JSON 資料。

練習查看網站

為了方便讀者學習，我在自己的網站上架設了相同的實驗環境，以利大家學習網站安全。
大家可以瀏覽 nodelab.feifei.tw 來觀察這個實驗環境。進入網站後，我們可以觀察幾個重要的事項：

顯示不安全的網站

當您瀏覽 nodelab.feifei.tw 時，瀏覽器會顯示這是一個不安全的網站。

不安全的網站警告

  • 原因：這是因為我們尚未使用 HTTPS 協定，也就是說，網站沒有設定 SSL/TLS 憑證。
  • 安全影響：沒有 HTTPS 意味著網站與使用者之間的通訊是未加密的，可能被第三方攔截或竄改。
  • 學習重點：了解 HTTPS 的重要性，以及如何識別安全和不安全的網站連接。

開啟開發者工具觀察

開發者工具是學習和分析網站安全的重要工具。以下是如何開啟和使用開發者工具：

  1. 開啟方式：

    • 使用鍵盤快捷鍵：按 F12 鍵（大多數瀏覽器適用）
    • 在 Chrome 瀏覽器中，點擊右上角的選單 > 更多工具 > 開發人員工具
    • 在 Firefox 中，點擊選單 > 網頁開發者 > 切換工具箱

  2. 使用開發者工具觀察：

    • 網路（Network）標籤：觀察網頁載入時的所有請求，包括 API 呼叫
    • 元素（Elements）標籤：檢查和修改網頁的 HTML 結構
    • 主控台（Console）標籤：查看 JavaScript 錯誤和日誌輸出
    • 應用程式（Application）標籤：檢查 cookies、瀏覽器儲存資訊等

  3. 安全相關觀察：

    • 檢查網路請求是否使用 HTTPS
    • 觀察 cookies 的設定，特別是它們的安全屬性
    • 查看是否有敏感資訊通過不安全的方式傳輸

透過使用開發者工具，我們可以深入了解網站的運作方式，這對於識別潛在的安全問題非常有幫助。在接下來的課程中，我們將更詳細地探討如何利用這些工具來發現和分析各種安全漏洞。

練習：

  1. 瀏覽 nodelab.feifei.tw
  2. 開啟開發者工具
  3. 觀察網路請求，特別注意 API 呼叫（/api/hello）
  4. 檢查主控台是否有任何警告或錯誤訊息

練習一：分析網站請求與回應封包

在這個練習中，我們將深入了解當我們存取一個網站時，瀏覽器與伺服器之間實際發生的通訊過程。我們會特別關注請求封包（Request）和回應封包（Response）的內容。

步驟：

  1. 存取 nodelab.feifei.tw
  2. 開啟瀏覽器的開發者工具（按 F12 或右鍵選擇「檢查」）
  3. 切換到「網路」（Network）分頁
  4. 重新整理頁面，觀察出現的網路請求

網路請求概覽

在網路請求列表中，找到並點選 nodelab.feifei.tw 的請求：

選擇主要請求

接下來，我們將分別查看請求封包和回應封包的內容。

分析請求封包（Request）

在右側面板中，切換到「標頭」（Headers）分頁，然後勾選顯示「原始」（Raw）選項來查看原始的請求標頭：

請求標頭原始內容

請求封包內容解釋：

GET / HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,zh-TW;q=0.8,zh;q=0.7,en-GB;q=0.6
Cache-Control: no-cache
Connection: keep-alive
Host: nodelab.feifei.tw
Pragma: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 Edg/128.0.0.0
  • GET /: 這是 HTTP 方法和請求的路徑。GET 表示我們想要獲取資源，/ 表示我們請求的是網站的根目錄。
  • Accept: 指定使用者端能夠接受的內容類型。
  • Accept-Encoding: 指定使用者端能夠接受的內容編碼方式。
  • Accept-Language: 指定使用者端偏好的語言。
  • Cache-Control 和 Pragma: 用於控制快取行為。
  • Host: 指定請求的目標主機。
  • Upgrade-Insecure-Requests: 表示使用者端支持升級到 HTTPS 連接。
  • User-Agent: 提供有關使用者端瀏覽器和作業系統的資訊。

分析回應封包（Response）

同樣在「標頭」分頁中，我們可以查看伺服器的回應標頭：

HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Sat, 14 Sep 2024 15:21:34 GMT
Content-Type: text/html; charset=UTF-8
Transfer-Encoding: chunked
Connection: keep-alive
X-Powered-By: Express
Cache-Control: public, max-age=0
Last-Modified: Sat, 14 Sep 2024 14:42:57 GMT
ETag: W/"3be-191f0fcaf94"
Content-Encoding: gzip

回應封包內容解釋：

  • HTTP/1.1 200 OK: 表示請求成功。
  • Server: 指出伺服器使用軟體與作業系統。
    • 可能會有資安問題，知道版本找已知漏洞。
  • Date: 回應的日期和時間。
  • Content-Type: 指定回應內容的類型。
  • Transfer-Encoding: 指定回應內容的傳輸編碼方式。
  • Connection: 指定連接的狀態。
  • X-Powered-By: 額外資訊，使用了 Express 框架。
    • 可能會有資安問題，知道框架找更好找漏洞。
  • Cache-Control: 指定快取控制策略。
  • Last-Modified: 資源最後修改的時間。
  • ETag: 資源的版本標識符。
  • Content-Encoding: 指定回應內容的編碼方式。

安全性考量

  1. 敏感資訊洩漏：請注意請求和回應封包中是否包含敏感資訊。例如，User-Agent 可能洩漏使用者端軟體版本。
  2. 安全標頭缺失：注意是否缺少重要的安全相關標頭，如 Strict-Transport-Security、Content-Security-Policy 等。
  3. 伺服器資訊洩漏：Server 和 X-Powered-By 標頭可能洩漏伺服器和框架版本，這可能被攻擊者利用。
  4. 不安全的連接：注意到這是一個 HTTP 連接，而非 HTTPS，代表資料傳輸是未加密的。

通過分析這些封包，我們可以更好地理解網站的運作方式，並識別潛在的安全問題。

練習二：分析 API 呼叫（/api/hello）

在這個練習中，我們將觀察並分析一個簡單的 API 呼叫。這將幫助我們了解前端如何與後端通訊，以及如何識別和檢查 API 請求。

步驟：

  1. 在 nodelab.feifei.tw 頁面上，點選「從 API 取得資訊」按鈕
  2. 觀察開發者工具中的網路分頁

API 呼叫概覽

觀察重點

  1. 請求類型的區別：
    • 頁面載入時的主要請求類型是 Document（文件）
    • API 呼叫的請求類型是 Fetch（取得）
  2. 回應內容類型：
    • API 回應的 Content-Type 標頭為 application/json; charset=utf-8

API 回應詳情

深入分析

  1. API 請求特徵：
    • 路徑：注意到 API 請求的路徑是 /api/hello
    • 方法：觀察使用的 HTTP 方法（在這個例子中是 GET）
  2. 回應內容：
    • 檢查回應的 JSON 內容，了解 API 回傳的資料結構
    • 思考：這些資料是否包含敏感資訊？是否需要額外的保護？
  3. 安全性考量：
    • 檢查是否有適當的授權機制（如 API 金鑰或 token）
    • 觀察是否使用 HTTPS 加密傳輸（在這個例子中沒有使用，這是一個安全問題）
    • 檢查回應標頭中是否包含適當的安全標頭（如 Content-Security-Policy）
  4. 效能考量：
    • 觀察 API 呼叫的回應時間
    • 檢查回應大小，考慮是否有優化空間
  5. 錯誤處理：
    • 嘗試修改 API 請求（例如更改路徑），觀察錯誤回應
    • 檢查前端如何處理 API 錯誤（例如，網路錯誤或伺服器錯誤）

練習題

  1. 嘗試使用開發者工具的網路分頁，找出 /api/hello 的完整請求和回應內容。
  2. 分析 API 回應的 JSON 結構，它包含哪些資訊？
  3. 比較頁面載入（Document 請求）和 API 呼叫（Fetch 請求）的回應標頭有何不同？
  4. 思考：如果這個 API 需要傳輸敏感資訊，我們應該採取哪些額外的安全措施？

回顧本篇

在這篇文章中，我們深入探討了如何建立一個基本的網站環境，並學習了分析網站結構和通訊的基礎知識。以下是本篇的主要重點：

  1. 環境建置：我們學習了如何使用 Docker 和 Node.js 建立一個簡單的網站環境，包括前端、後端和資料庫的基本設定。
  2. 網站架構：我們了解了基本的網站架構，包括前端、後端和資料庫的角色和互動方式。
  3. 開發者工具的使用：我們學習了如何使用瀏覽器的開發者工具來分析網站的運作，特別是觀察網路請求和回應。
  4. HTTP 通訊分析：我們深入研究了 HTTP 請求和回應的結構，學習如何解讀各種 HTTP 標頭和其安全含義。
  5. API 呼叫分析：我們觀察了一個簡單的 API 呼叫，了解了前後端如何透過 API 進行通訊，以及如何分析 API 請求和回應。
  6. 安全性考量：透過本篇，我們提到了多個與網站安全相關的重點，如 HTTPS 的重要性、敏感資訊的處理、以及伺服器資訊洩漏等問題。

這些知識為我們後續深入研究網站安全提供了重要的基礎。在接下來的文章中，我們將基於這些基礎知識，進一步探討更多具體的網站安全問題和解決方案。


下一篇
資安這條路：Day 2 了解使用者輸入與輸出與前端關係
系列文
資安這條路：系統化學習網站安全與網站滲透測試 共 30 篇
  1. 26
    資安這條路：Day 26 SSDLC 安全開發軟體生命週期─概述、需求階段
  2. 27
    資安這條路：Day 27 SSDLC 安全開發軟體生命週期─設計階段與威脅建模
  3. 28
    資安這條路：Day 28 SSDLC 安全開發軟體生命週期─開發階段與 OWASP 標準(OWASP Top 10、OWASP ASVS、OWASP Developer Guide)
  4. 29
    資安這條路：Day 29 SSDLC 安全開發軟體生命週期─測試階段與 OWASP Web Security Testing Guide
  5. 30
    資安這條路：Day 30 SSDLC 安全開發軟體生命週期─部署與維運階段與整合 OWASP 資源
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22053 篇
完賽人數
594 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙